<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条码打印预览</title>
    <link rel="stylesheet" href="./static/css/style.css">
    <!--
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    -->
    <link rel="stylesheet" href="./static/css/all.min.css">
    <style>
        @media print {
            .print-actions, 
            .print-actions * {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
            }
            header, footer {
                display: none !important;
            }
            .header-info {
                display: none !important;
            }
            .barcode-image {
                margin: 0.3cm 0 0 0!important;
            }
            .a4-page {
                box-shadow: none;
                margin: 0 auto !important;
                padding: 0 !important;
                width: 100% !important;
                min-height: auto !important;
                position: relative !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                page-break-after: always !important;
            }
            .barcode-container {
                margin: 0 auto !important;
                padding: 0 !important;
                width: 18cm !important;
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important;
                grid-template-rows: repeat(3, 1fr) !important;
                gap: 0 !important;
            }
            .barcode-card {
                page-break-inside: avoid !important;
                break-inside: avoid !important;
            }
            body {
                margin: 0 !important;
                padding: 0 !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                min-height: 100vh !important;
            }
            .container {
                padding: 0 !important;
                margin: 0 !important;
                width: 100% !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
            }
            @page {
                margin: 0 !important;
                padding: 0 !important;
                size: A4 !important;
            }
        }
        .a4-page {
            width: 21cm;
            min-height: 29.7cm;
            margin: 0 auto;
            padding: 1cm;
            background: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            position: relative;
            box-sizing: border-box;
            page-break-after: always;
        }
        .barcode-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 0;
            margin: 2cm auto;
            max-width: 18cm;
        }
        .barcode-card {
            border: none;
            border-radius: 0;
            padding: 10px;
            position: relative;
            min-height: 5cm;
            border-bottom: 1px solid #000;
            border-right: 1px solid #000;
        }
        .barcode-card:nth-child(2n) {
            border-right: none;
        }
        .barcode-card:nth-last-child(-n+2) {
            border-bottom: none;
        }
        .barcode-info {
            font-size: 14px;
            line-height: 1.8;
        }
        .barcode-info div {
            display: flex;
        }
        .barcode-info-label {
            width: 60px;
            font-weight: bold;
            margin-right: 5px;
        }
        .info-row {
            display: flex;
            justify-content: space-between;
        }
        .info-group {
            display: flex;
            align-items: center;
        }
        .barcode-image {
            text-align: center;
            margin: 0 0 0 0;
        }
        .barcode-number {
            font-family: monospace;
            font-size: 16px;
            text-align: center;
            font-weight: bold;
            letter-spacing: 1px;
        }
        .barcode-remark {
            font-size: 16px;
            text-align: center;
            font-weight: bold;
        }
        .header-info {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1cm;
            margin-bottom: 1cm;
            border-bottom: 1px solid #ddd;
            padding-bottom: 0.5cm;
        }
        .print-actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            padding: 20px;
            background: #f8f9fc;
            border-bottom: 1px solid #e0e6f0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="print-actions">
            <button onclick="window.print()" class="btn btn-primary">
                <i class="fas fa-print"></i> 打印
            </button>
            <!--
            <button onclick="downloadPDF()" class="btn btn-secondary">
                <i class="fas fa-file-pdf"></i> 下载PDF
            </button>
            -->
            <button onclick="window.history.back()" class="btn">
                <i class="fas fa-arrow-left"></i> 返回修改
            </button>
        </div>

        <div class="a4-page">
            <header>
                <h2>棉花公证检验条码</h2>
            </header>

            <div class="header-info">
                <div class="info-group">
                    <span class="info-label">起始编号:</span>
                    <span>{{ barcode_images[0].number }}</span>
                </div>
                <div class="info-group">
                    <span class="info-label">结束编号:</span>
                    <span>{{ barcode_images[-1].number }}</span>
                </div>
                <div class="info-group">
                    <span class="info-label">条码数量:</span>
                    <span>{{ barcode_images | length }}</span>
                </div>
                <div class="info-group">
                    <span class="info-label">生成时间:</span>
                    <span>{{ now }}</span>
                </div>
            </div>

            <div class="barcode-container">
                {% for barcode in barcode_images %}
                <div class="barcode-card">
                    <div class="barcode-info">
                        <div class="info-row">
                            <div class="info-group">
                                <span class="barcode-info-label">需方:</span>
                                <span>需方</span>
                            </div>
                            <div class="info-group">
                                <span class="barcode-info-label">产地:</span>
                                <span>{{ origin }}</span>
                            </div>
                        </div>
                        <div class="info-row">
                            <div class="info-group">
                                <span class="barcode-info-label">批号:</span>
                                <span>{{ batch_number }}</span>
                            </div>
                            <div class="info-group">
                                <span class="barcode-info-label">包号:</span>
                                <span>{{ package_number }}</span>
                            </div>
                        </div>
                        <div class="info-row">
                            <div class="info-group">
                                <span class="barcode-info-label">样品号:</span>
                                <span>{{ sample_number }}</span>
                            </div>
                            <div class="info-group">
                                <span class="barcode-info-label">抽样日期:</span>
                                <span>{{ sampling_date }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="barcode-image">
                        <img src="{{ url_for('generate_barcodes.static', filename='barcodes/' + barcode.filename) }}"
                             alt="Barcode {{ barcode.number }}"
                             style="width: {{ width_cm }}cm; height: {{ height_cm }}cm;">
                    </div>

                    <div class="barcode-number">{{ barcode.number }}</div>
                </div>
                {% endfor %}
            </div>

            <footer>
                <p>生成时间: {{ now }}</p>
            </footer>
        </div>
    </div>

    <script>
        function downloadPDF() {
            // 收集打印数据
            const printData = {
                inspection_type: "{{ inspection_type }}",
                batch_number: "{{ batch_number }}",
                sample_number: "{{ sample_number }}",
                origin: "{{ origin }}",
                package_number: "{{ package_number }}",
                sampling_date: "{{ sampling_date }}",
                barcode_images: {{ barcode_images | tojson }},
                width_cm: {{ width_cm }},
                height_cm: {{ height_cm }}
            };

            // 发送请求生成PDF
            fetch('/print-pdf', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(printData)
            })
            .then(response => response.blob())
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'barcodes.pdf';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);
            });
        }
    </script>
</body>
</html>